<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/base/jsp/taglibs.jsp"%>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title></title>
	<%@ include file="/base/jsp/jscss.jsp"%>
	<script type="text/javascript" src="${ctx }/base/js/jquery.tableDynamicRow.js"></script>
	<script type="text/javascript" src="${ctx }/base/js/jquery.tableHighlight.js"></script>
	<script type="text/javascript">
	
		$(function(){
			
			
		
		});

		function next() {
			$("#form").submit();
		}
		function up() {
			window.history.back();
		}

		var marks = [];
		function setting(obj, tablename, field, label) {

			var o = $(obj);
			if (o.attr("checked") == "checked") {
				add(tablename, field, label);
			} else {
				remove(tablename, field);
			}
		}
		var dynamicRow = null;
		function add(tablename, field, label) {

			var text = $('#fetter_templete').html();
			var mark = {
				"tablename" : tablename,
				"field" : field
			};
			text = text.replace("$tablename", tablename)
					.replace("$name", field).replace("$label", label);
			if (dynamicRow == null) {
				dynamicRow = new $.tableDynamicRow({

					table : '#result',
					template : text,
					marker : '#index#',
					index : 1,
					minRows : 1,
					minRowsMessage : '至少保留 1 条记录.',
					maxRows : 10,
					maxRowsMessage : '最多只能有 10 条记录.',
					onInsert : function(tr, index) {

						var id = tr.attr('id');
						var newId = "fetter_" + index;
						var peopleId = "fetter_" + index;
						tr.attr('id', newId).find('a[rel="' + id + '"]').attr(
								'rel', newId).attr('relPeople', peopleId);
					}
				});

				mark.index = 1;
			} else {
				mark.index = dynamicRow.insert(text);
			}
			marks.push(mark);
		}
		function remove(tablename, field) {
			for ( var i in marks) {
				var m = marks[i];
				if (tablename == m.tablename && field == m.field) {
					alert(m.index);
					marks.splice(i, 1);
					dynamicRow.remove(m.index);
					// 					var tr = dynamicRow.find('tr:eq(' + m.index + ')').html("<td>ssssss</td>");//css('background-color', 'red')
					return;
				}
			}

		}
		function test() {
			for ( var i in marks) {
				var m = marks[i];
				alert(i + "-->" + m.tablename + "-->" + m.field + "-->"
						+ m.index);
			}
		}
	</script>
	
</head>
<body>
<input type="button" onclick="test()" value="push"/>
	<div style="width: 100%">
	<span style="float: left;">
<form action="${ctx }/fetter/fetter!dataTablesWithField.do" method="post" id="form">
	<table border="1">
		<tr>	
			<th></th>
			<th>表名</th>
			<th>注释</th>
		</tr>
		<c:forEach items="${dataTables }" var="bean"> 
		<tr style="background: gray;">
			<td></td>
			<td>${bean.name }</td>
			<td>${bean.info }</td>
		</tr>
			<c:if test="${!empty bean.columns }" >
				<c:forEach items="${bean.columns }" var="field">
					<tr>
						<td><easy:checkbox id="tables" value="${bean.name }" onclick="setting(this,'${bean.name }','${field.name }','${field.info }')" /></td>
						<td>${field.name }</td>
						<td>${field.info }</td>
					</tr>
				</c:forEach>
			</c:if>
		</c:forEach>
		<tr>
			<td colspan="3"><a href="javascript:up();">上一步</a><a href="javascript:next();">下一步</a></td>
		</tr>
	</table>
</form>
</span>

<span style="margin-left: 400px;float: left;">
<form action="${ctx }/fetter/fetter!settings.do" method="post" id="form2">
	<table border="1" id="result">
		<tr id="fetter_0">
			<th>表名</th><th>表字段</th><th>显示名称</th><th>显示类型</th>
		</tr>
		
		<tr>
			<td><input type="submit" value="提交"/></td>
		</tr>
	</table>
</form>
</span>
</div>





<table id="fetter_templete" > 
<tr id="fetter_#index#">
	<td><easy:text id="tablename" value="$tablename" disabled="true"/></td>
	<td><easy:text id="name" value="$name" disabled="true"/></td>
	<td><easy:text id="label" value="$label"/></td>
	<td><easy:selects id="d" name="showType"/></td>
</tr>
</table>
</body>
</html>